@一人前端?：今天，我們看到很多實用的APP使生活越來越便捷，但有些APP的界面設(shè)計讓用戶失望。因此，他們還不被認可和普及。當你想讓用戶的能一直忠于這款應(yīng)用時，絕對不能忽視界面的美觀。

我們通過欣賞幾款優(yōu)秀的界面設(shè)計，然后一步步教你創(chuàng)建一個天氣App的界面，希望可以提高你對美觀性的認識以及實戰(zhàn)能力。

Moodswings

第一個應(yīng)用程序我想討論的是Moodswings。這是一個概念A(yù)PP應(yīng)用，出自一位非常有才華的瑞典設(shè)計師古斯塔夫（Schiring）之手。用這款應(yīng)用可以跟蹤你一整天的情緒。我非常喜歡它的用戶界面，因為它同時具備獨特、清晰、有創(chuàng)造力、有趣的特性。

Diacarta Planner

我確實很喜歡這款應(yīng)用復(fù)古的感覺。整體設(shè)計是非常不尋常的，你會感到老學校舊時光的感覺。設(shè)計師有效地使用光紋理和褪色。所有的元素都在完美的平衡的前提下融為一體，尤其是導(dǎo)航 。

The ChoreMonster

這個APP主打插畫風格，富有趣味性和創(chuàng)造性。設(shè)計師給予導(dǎo)航和每個菜單項選項充分的重視。五顏六色的設(shè)計和頑皮的排版正好讓這個APP應(yīng)用適合于它的用戶——孩子們。

我們已經(jīng)體驗了一些獨特的、豐富多彩的APP應(yīng)用，現(xiàn)在讓我們著手創(chuàng)建自己的APP應(yīng)用。今天我們將設(shè)計一款干凈時尚的天氣APP。讓我們開始吧。

這里提供的只是一個簡單的案例，如果你想創(chuàng)造出更加漂亮的界面，可以先從模仿優(yōu)秀作品開始 → APP UI 優(yōu)秀設(shè)計

Step 1：

打開Photoshop并新建一個600*800 px 的新文件。

Step 2：

選擇“矩形工具”，創(chuàng)建一個大矩形，填充顏色# 920049。

Step 3：

創(chuàng)建一個新的圖層，并填充顏色# ffffff，減少填充到0%。添加模式，單擊圖層樣式>圖案疊加。

（原文作者沒有給出圖案，不過你可以下載這10個設(shè)計師必備的頂尖用戶界面紋理，也很搭配唷）

Step 4：

添加標題文字「Tuesday」，顏色填充#ffffff。然后點擊圖層樣式>陰影，給文本添加一個細薄的影子。

Step 5：

添加「溫度」，重復(fù)相同的過程，給溫度文本添加陰影。

Step 6：

設(shè)置前景色為# ffffff并利用鋼筆工具來創(chuàng)建云形狀。

Step 7：

現(xiàn)在，點擊圖層樣式添加描邊、顏色疊加和投影。

Step 8：

選擇「多邊形工具」調(diào)整頂部設(shè)置創(chuàng)建太陽，顏色為# fff691。并給下面這一層云添加描邊，填充顏色#ffba00。

Step 9：

現(xiàn)在讓我們開始細節(jié)面板。選擇一個新層，并將其置于圖案層后，選擇“矩形選框工具”創(chuàng)建一個小紙條，填充顏色#00 bff3。

Step 10:

點擊圖層樣式>漸變疊加 ，添加圖層樣式：

Step 11：

創(chuàng)建另一個紙條，并填充顏色#1f2f4e。

Step 12：

現(xiàn)在讓我們添加文本和細節(jié)，第一條,所以選擇“橡皮擦工具”，調(diào)整畫筆的大小和形狀的刷板。參考底部的模式，選擇一個漂亮的樣式。

Step 13：

選擇“鋼筆工具”創(chuàng)建三角形，顏色#00bff3。并使用一個柔軟的圓形筆刷在底部描繪一個小的影子。

Step 14：

添加文字「More ?details」，填充顏色#ffffff。現(xiàn)在在右邊添加「更多」圖標，然后給文字和圖標添加一些陰影，設(shè)置如下。

Step 15：

繼續(xù)我們的導(dǎo)航創(chuàng)建。首先，我們將創(chuàng)建一些分隔線。選擇「直線工具」，畫1 px寬，前景顏色#00000的一直線。然后點擊圖層樣式>投影，樣式如下。

Step 16：

用“矩形工具”創(chuàng)建導(dǎo)航按鈕，在中間創(chuàng)建一個矩形，顏色#88022e，然后添加投影。如下圖。

Step 17：

添加導(dǎo)航文本，然后給文本添加一些投影。

Step 18：

將其余圖標（用以上相同的方式創(chuàng)建了云、太陽等）添加，并設(shè)置同樣的投影樣式，設(shè)置如下：

最終輸出結(jié)果為：

原文地址：ui-cloud
譯文地址：frontfox
譯者：一人前端

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：